// --------------------------------- width ---------------------------------

$hd: 2 !default;

$width: 375px * $hd;

// --------------------------------- common flex ---------------------------------
// row
.flexRow {
	display: flex;
	flex-direction: row;
}

.flexRowWrap {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}

// column
.flexColumn {
	display: flex;
	flex-direction: column;
}

// 水平居中
.hCenter {
	display: flex;
	justify-content: center;
}

// 垂直居中
.vCenter {
	display: flex;
	align-items: center;
}

.vFlexEnd {
	display: flex;
	align-items: flex-end;
}

// 两端对齐
.spaceBetween {
	@extend .flexRow;
	justify-content: space-between;
}

// 水平垂直居中
.center {
	@extend .hCenter;
	align-items: center;
}

// --------------------------------- animation ---------------------------------
.fadeIn {
	animation: fadeIn 0.5s;
	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
}
